<template>
  <el-form :model="form" ref="formRef">
    <el-row>
      <el-col :offset="11" :span="2">
        <el-form-item prop="headImg" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <img class="header-img" :src="form.headImg" @click="clickImg" />
          <input v-show="false" ref="fileRef" type="file" accept=".png,.jpeg,.jpg,.gif" @change="imgChange" />
        </el-form-item>
      </el-col>
      <el-col :offset="10" :span="4">
        <el-form-item label="生日" prop="birthDay" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-date-picker
            style="width: 100%;"
            v-model="form.birthDay"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择日期"
          />
        </el-form-item>
      </el-col>
      <el-col :offset="9" :span="5">
        <el-form-item label="作业地址" prop="workUrl" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-input
            style="width: 100%;"
            v-model="form.workUrl"
            placeholder="请输入"
            type="textarea"
            :rows="5"
            resize="none"
          />
        </el-form-item>
      </el-col>
      <el-col :offset="9" :span="5">
        <el-form-item label="个性签名" prop="motto" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-input
            style="width: 100%;"
            v-model="form.motto"
            placeholder="请输入"
            type="textarea"
            :rows="5"
            resize="none"
          />
        </el-form-item>
      </el-col>
      <el-col :offset="9" :span="5">
        <el-form-item label="性别" prop="sex" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-radio-group v-model="form.sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
          <!-- <el-select v-model="form.sex" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </el-form-item>
      </el-col>
      <el-col :offset="9" :span="5">
        <el-form-item label="爱好" prop="hobby" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-input-tag v-model="form.hobby" placeholder="回车输入" />
          <!-- <el-select v-model="form.sex" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </el-form-item>
      </el-col>
    </el-row>
    <div style="text-align: center;">
      <el-button :loading="loading" type="primary" @click="submit">保存</el-button>
    </div>
  </el-form>
</template>

<script lang="ts">
import { getInfo, save } from '@/api/userInfo'
export default {
  data() {
    return {
      loading: true,
      form: {
        headImg: '/img/defalutHeader.png',
        birthDay: '',
        workUrl: '',
        motto: '',
        sex: '',
        hobby: []
      },
      options: [
        {
          label: '男',
          value: 'boy'
        },
        {
          label: '女',
          value: 'gril'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    clickImg() {
      const fileRef = this.$refs.fileRef as any
      fileRef.click()
    },
    imgChange(e: Event) {
      const fileInput = e.target as HTMLInputElement
      if (!fileInput.files) return
      const file  = fileInput.files[0]
      const reader = new FileReader();
      reader.onload = (evt: any) => {
        this.form.headImg = evt.target.result as string
      };
        reader.readAsDataURL(file);
    },
    submit() {
      const res = this.$refs.formRef as any
      res.validate((vali: boolean) => {
        if (!vali) return // 前端校验不通过
        this.loading = true;
        save(this.form).then(() => {

        }).finally(() => {
          this.loading = false
        })
      })
    },
    getData() {
      this.loading = true;
      getInfo().then((res: any) => {
        // 成功
        if (res.code !== 200) return;
        if (!res.data) return;
        // 数据返显示
        Object.assign(this.form, res.data)
        this.form.headImg = 'http://10.30.54.94:2999/img/123.gif'
      }).finally(() => {
        // 不管成功与否
        this.loading = false;
      }).catch(() => {
        // 失败
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
